<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>权限列表</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../css/oksub.css">
	<script type="text/javascript" src="../../lib/loading/okLoading.js"></script>
</head>
<body>
<div class="ok-body">
	<!--模糊搜索区域-->
	<!--<div class="layui-row">-->
		<!--<form class="layui-form layui-col-md12 ok-search">-->
			<!--<input class="layui-input" placeholder="开始日期" autocomplete="off" id="startTime" name="startTime">-->
			<!--<input class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime" name="endTime">-->
			<!--<input class="layui-input" placeholder="请输入角色名" autocomplete="off" name="name">-->
			<!--<button class="layui-btn" lay-submit="" lay-filter="search">-->
				<!--<i class="layui-icon layui-icon-search"></i>-->
			<!--</button>-->
		<!--</form>-->
	<!--</div>-->
	<!--数据表格-->
	<table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script src="../../libme/script/tgfApi.js"></script>
<script src="../../libme/pages/body.js"></script>
<script>
	layui.use(["element", "table", "form","okMock", "jquery","util", "api"], function () {
		let table = layui.table;
		let form = layui.form;
		let okMock = layui.okMock;
		let util = layui.util;
		let $ = layui.jquery;
		let api = layui.api;
        //let treetable = layui.treeTablep;
		okLoading.close();
		// laydate.render({elem: "#startTime", type: "datetime"});
		// laydate.render({elem: "#endTime", type: "datetime"});

        // var permissonTable = treetable.render({
        //     treeColIndex: 1,
        //     treeSpid: 0,
        //     treeIdName: "permissionId",
        //     treePidName: "parentId",
        //     elem: "#tableId",
        //     url: okMock.api.permission.list,
			// parseData: function (res) {
			//    return {
			// 	   code: res.code,
			// 	   msg: res.name,
			// 	   //count: res.code == RESP_SUCCESS ? res.extend.page.totalCounts : 0,
			// 	   count: res.extend.page.totalCounts,
			// 	   //data: res.code == RESP_SUCCESS ? res.extend.page.data.list : ''
			// 	   data: res.extend.page.data.list
			//    };
			// },
        //     page: false,
        //     size: "sm",
        //     cols: [[
			// 	{type: "checkbox",  width: 50},
			// 	{type: "numbers",   width: 50},
			// 	{field: "permissionId",   title: "权限ID",   width: 100, sort: true},
			//     {field: "permissionName", title: "权限名称", width: 100},
			// 	{field: "permissionCode", title: "权限代号", width: 100},
			// 	{field: "parentId", title: "上级权限", width: 100},
			//     {field: "createBy", title: "创建人员", width: 100,align: "center"},
			//     {field: "createAt", title: "创建时间", width: 100,align: "center",
			// 		templet: function(d){
			// 		   const d_createAt = d.createAt
			// 		   if(d_createAt == null){
			// 			   return '-'
			// 		   }
			// 		   return util.toDateString(d_createAt, 'yyyy-MM-dd')
			// 		}
			// 	},
			//     {field: "updateBy", title: "修改人员", width: 100,align: "center"},
			//     {field: "updateAt", title: "修改时间", width: 100,align: "center",
			// 	   templet: function(d){
			// 		const d_updateAt = d.updateAt
			// 		if(d_updateAt == null){
			// 			return '-'
			// 			}
			// 		   return util.toDateString(d_updateAt, 'yyyy-MM-dd')
			// 	   }
			// 	},
			// 	{field: "remark", title: "备注", width: 250},
			// 	{title: "操作", width: 80, align: "center", templet: "#operationTpl"}
			// ]],
        //     done: function (res, curr, count) {
        //         layer.closeAll("loading");
        //         $("#countNum").text(count);
        //     }
        // });

		let permTable = table.render({
			elem: "#tableId",
			url: okMock.api.permission.list,
			limit: 10,
			page: true,
			toolbar: "#toolbarTpl",
			size: "sm",
            beforeSuccessDone: function (res, curr) {
                if(res.code !== api.responseCode.success) {
                    api.defaultErrorhandler(res)
                    return false;
                }
            },
            parseData: function (res) {
                return {
                    code: res.code,
                    msg: res.name,
                    //count: res.code == RESP_SUCCESS ? res.extend.page.totalCounts : 0,
                    count: res.extend.page.totalCounts,
                    //data: res.code == RESP_SUCCESS ? res.extend.page.data.list : ''
                    data: res.extend.page.data.list
                };
            },
            request: {
                pageName:'currentPage',
                limitName:'pageCounts'
            },
            response: {
                statusCode: "100"
            },
			cols: [[
				{type: "checkbox",  width: 50},
				{type: "numbers",   title:'序号',width: 50},
				{field: "permissionId",   title: "权限ID",   width: 100, sort: true},
                {field: "permissionName", title: "权限名称", width: 100},
				{field: "permissionCode", title: "权限代号", width: 150},
				{field: "parentId", title: "上级权限", width: 100},
                {field: "createBy", title: "创建人员", width: 120,align: "center", hide: true,
                    templet: function (d) {
                        if(d.createBy == null || d.createBy == '') {
                            return '-'
                        }
                        return d.createBy
                    }
                },
                {field: "createAt", title: "创建时间", width: 120,align: "center", hide: true,
                    templet: function(d){
                        const d_createAt = d.createAt
                        if(d_createAt == null){
                            return '-'
                        }
                        return util.toDateString(d_createAt, 'yyyy-MM-dd')
                    }
                },
                {field: "updateBy", title: "修改人员", width: 120,align: "center", hide: true,
                    templet: function (d) {
                        if(d.updateBy == null || d.updateBy == '') {
                            return '-'
                        }
                        return d.updateBy
                    }
                },
                {field: "updateAt", title: "修改时间", width: 120,align: "center", hide: true,
                    templet: function(d){
                        const d_updateAt = d.updateAt
                        if(d_updateAt == null){
                            return '-'
                        }
                        return util.toDateString(d_updateAt, 'yyyy-MM-dd')
                    }
                },
				{field: "remark", title: "备注", width: 320},
				{title: "操作", width: 80, align: "center", templet: "#operationTpl"}
			]],
			done: function (res, curr, count) {// 服务器返回数据, 当前页码, 总记录数
				//console.log(res, curr, count);
				api.doShowUserPermsMenus();
			}
		});

		// form.on("submit(search)", function (data) {
         //    permimssionTable.reload({
		// 		where: data.field,
		// 		page: {curr: 1}
		// 	});
		// 	console.log("0000")
		// 	return false;
		// });

		table.on("toolbar(tableFilter)", function (obj) {
			switch (obj.event) {
				case "add":
					add();
					break;
				case "batchDel":
					batchDel();
					break;
			}
		});

		table.on("tool(tableFilter)", function (obj) {
			let data = obj.data;
			switch (obj.event) {
				case "modify":
					edit(data);
					break;
				case "delete":
					del(data);
					break;
			}
		});

		function add() {
			api.open("添加权限", "permission-add.html", "90%", "90%", null, function () {
                //permTable.reload();
			})
		}

		function batchDel() {
            api.confirm("确定要批量删除吗？", function (index) {
                layer.close(index);
                var checkStatusData = table.checkStatus('tableId').data;
                var ids = [];
                if(checkStatusData.length > 0 ) {
                    $.each(checkStatusData, function (idx, obj) {
                        ids.push(obj.permissionId)
                    })
                }else{
                    layer.msg("未选择有效数据", {offset: "t", anim: 6});
                    return;
                }
                //console.log(ids)
                if (ids.length > 0) {
                    deleteByIds(ids)
                }
            });
		}

		function edit(data) {
			api.open("编辑角色", "permission-edit.html?pid=" + data.parentId, "90%", "90%",
                function (layero, index) {
                    var body = layer.getChildFrame('body', index);
                    body.find('input[name="permissionId"]').val(data.permissionId);
                    body.find('input[name="permissionName"]').val(data.permissionName);
                    body.find('input[name="permissionCode"]').val(data.permissionCode);
                    body.find('input[name="remark"]').val(data.remark);
				},
				function () {
                	permTable.reload();
				}
			)
		}

		function del(data) {
            api.confirm("确定要删除吗？", function () {
                var ids = []
                ids.push(data.permissionId)
                deleteByIds(ids)
            })
		}

        function deleteByIds(ids) {
            api.request({
                url: okMock.api.permission.deleteByIds,
                where:{ids: ids},
                traditional: true
            },function (resp, stat) {
                api.tableSuccessMsg(resp.name);
            },function () {
                permTable.reload();
            })
        }


	})
</script>
<!-- 头工具栏模板 -->
<script type="text/html" id="toolbarTpl">
	<div class="layui-btn-container">
		<div class="layui-inline layui-hide permission-create" lay-event="add"><i class="layui-icon layui-icon-add-1"></i></div>
		<div class="layui-inline layui-hide permission-delete" lay-event="batchDel"><i class="layui-icon layui-icon-delete"></i></div>
	</div>
</script>
<!-- 行工具栏模板 -->
<script type="text/html" id="operationTpl">
	<a href="javascript:" title="编辑" class="permission-modify layui-hide" lay-event="modify"><i class="layui-icon">&#xe642;</i></a>
	<a href="javascript:" title="删除" class="permission-delete layui-hide" lay-event="delete"><i class="layui-icon">&#xe640;</i></a>
</script>
</body>
</html>
